<template>
  <div>
    <div class="select_top">
      <el-input v-model="queryparam" placeholder="请输入项目名称、类别、指标" style="width:29%;margin:10px 12px 0 0" clearable
        @keyup.native.enter="getprojectList"
      ></el-input>
      <el-select v-model="qtbm" placeholder="牵头部门" clearable>
        <el-option
          v-for="item in qtbmdata"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-select v-model="zrdw" placeholder="责任单位" clearable>
        <el-option
          v-for="item in zrdwdata"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-select v-model="status" placeholder="最新状态" clearable>
        <el-option
          v-for="item in statusdata"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="tf" placeholder="是否脱幅" clearable>
        <el-option
          v-for="item in tfdata"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="getprojectList">检索</el-button>
      <el-button @click="exportExcel">导出</el-button>

    </div>
    <el-table
      ref="filterTable"
      :data="tableData"
      v-loading="loading"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >

      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.pname"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nname"
        label="所属指标"
      >
      </el-table-column>
      <el-table-column
        prop="hash.typename"
        label="所属类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.intime"
        label="最后更新时间"
      >
      </el-table-column>
      <el-table-column
        label="本月状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.status=== '0'">未更新</span>
          <span v-else-if="scope.row.hash.status=== '1'">已更新</span>
          <span v-else style="color: red">要求重填</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否脱幅"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.pg_status=== '0'">否</span>
          <span v-else style="color: red">是</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">

          <el-button
            type="primary"
            size="small"
            @click="checkXM(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="基本信息"
      :visible.sync="showS"
      width="70%"
    >
      <el-form labelWidth="140px" style="height:450px">
        <el-form-item label="资金来源及金额：">

          <span v-if="xmData.source1&&xmData.amount1" style="margin-right:10px">{{xmData.source1}} {{xmData.amount1}}(万元)</span>
          <span v-if="xmData.source2&&xmData.amount2" style="margin-right:10px"> {{xmData.source2}} {{xmData.amount2}}(万元)</span>
          <span v-if="xmData.source3&&xmData.amount3"> {{xmData.source3}} {{xmData.amount3}}(万元)</span>
        </el-form-item>
        <el-form-item label="所属指标：">
          <el-input v-model="xmData.nname"></el-input>
        </el-form-item>
        <el-form-item label="所属类别：">
          <el-input v-model="xmData.pclassifyname"></el-input>
        </el-form-item>
        <el-form-item label="项目名称：">
          <el-input v-model="xmData.pname"></el-input>
        </el-form-item>
        <el-form-item label="项目概况：">
          <el-input v-model="xmData.ptext"></el-input>
        </el-form-item>
        <el-form-item label="项目级别：">
          <el-input v-model="xmData.pgrade"></el-input>
        </el-form-item>


        <el-form-item label="牵头部门：">
          <el-input v-model="xmData.assessunitname"></el-input>
        </el-form-item>
        <el-form-item label="责任单位：">
          <el-input v-model="xmData.orgname"></el-input>
        </el-form-item>
        <el-form-item label="计划开工时间：">
          <el-input v-model="xmData.begindate"></el-input>
        </el-form-item>
        <el-form-item label="计划竣工时间：">
          <el-input v-model="xmData.enddate"></el-input>
        </el-form-item>
        <el-form-item label="项目地址：">
          <el-input v-model="xmData.address"></el-input><el-button @click="innerVisible1=true" type="primary">查看地图</el-button>
        </el-form-item>
        <el-form-item label="联系人：">
          <el-input v-model="xmData.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：">
          <el-input v-model="xmData.tel"></el-input>
        </el-form-item>
      </el-form>
      <p class="line">
        进度更新记录
      </p>
      <el-table
        :data="tableData1" style="width: 92%;font-size:13px;margin: 20px auto"
      >
        <el-table-column
          label="更新时间"
          prop="hash.intime"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          prop="hash.statusname"
        >

        </el-table-column>
        <el-table-column
          label="项目状态"
          prop="hash.pgname"
        >

        </el-table-column>
        <el-table-column
          label="项目进度(%)"
          prop="hash.pgvalue"
        >

        </el-table-column>
        <el-table-column
          label="整治照片"
        >
          <template slot-scope="scope">
            <img :src="scope.row.hash.beforeimage" height="50" style="margin-bottom:5px" @click="showimg(scope.row.hash.beforeimage)">
            <img :src="scope.row.hash.laterimage" height="50" @click="showimg(scope.row.hash.laterimage)">
          </template>
        </el-table-column>
        <el-table-column
          label="作证材料"
          prop="hash.intime"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="viewcl(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          prop="hash.remark"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="showwrite(scope.row)">重填</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="60%"
        title="查看地址"
        top="0"
        :visible.sync="innerVisible1"
        appendToBody
      >
        <qqmap :chooseLocal="chooseLocal" :isshowMap="this.isshowMap" v-if="isRouterAlive"></qqmap>
      </el-dialog>
      <el-dialog

        title="作证材料"
        :visible.sync="showcl"

        appendToBody
      >
        <el-table
          :data="tableData2"
        >

          <el-table-column
            prop="hash.fname"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column
            prop="hash.intime"
            label="上传时间"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <a :href="scope.row.hash.furl">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog
        title="重填"
        heigt="60%"
        :visible.sync="showcl2"
        appendToBody
      >
        <el-form labelWidth="140px">
          <el-form-item label="限期时间" style="width:100%" class="is-required">
            <el-date-picker
              style="width:100%"
              v-model="writetime"
              valueFormat="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交办意见" style="width:100%" class="is-required">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="remark"
              v-validate="'required'" name="理由"
            >
            </el-input>
            <div class="el-form-item__error">{{ errors.first('理由') }}</div>
          </el-form-item>
          <el-form-item label="附件" style="width:100%">
            <el-upload
              class="upload-demo"
              action="url"
              :fileList="fileList"
              multiple
              :limit="1"
              :autoUpload="false"
              :onChange="changefileList"
              ref="upload"
              :httpRequest="upload3"
              :onRemove="removeImg3"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showcl2 = false">取 消</el-button>
          <el-button type="primary" @click="dowrite">提 交</el-button>
        </span>

      </el-dialog>
    </el-dialog>
    <el-dialog
      title=""
      :visible.sync="isshowimg"
      width="70%"
    >
      <img :src="bigimg" width="90%">
    </el-dialog>

    <el-dialog
      title="数据导出"
      :visible.sync="showout"
      style="height:0"
      :modal="false"
    >
      <p>
        <el-button type="primary" style="float:right;margin-bottom:10px;margin-right:20px" @click="doexportExcel">导 出</el-button>
      </p>
      <el-table
        id="tableexcel"
        ref="filterTable"
        :data="alldata"
      >

        <el-table-column
          type="index"
          width="50"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="hash.pname"
          label="项目名称"
        >
        </el-table-column>
        <el-table-column
          prop="hash.nname"
          label="所属指标"
        >
        </el-table-column>
        <el-table-column
          prop="hash.typename"
          label="所属类别"
        >
        </el-table-column>
        <el-table-column
          prop="hash.intime"
          label="最后更新时间"
        >
        </el-table-column>
        <el-table-column
          label="本月状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.status=== '0'">未更新</span>
            <span v-else-if="scope.row.hash.status=== '1'">已更新</span>
            <span v-else style="color: red">要求重填</span>
          </template>
        </el-table-column>
        <el-table-column
          label="是否脱幅"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.pg_status=== '0'">否</span>
            <span v-else style="color: red">是</span>
          </template>
        </el-table-column>
      </el-table>


    </el-dialog>
  </div>
</template>
<script>
import qqmap from '~/components/common/qqmap.vue';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      chooseLocal: {
        lat: '31.385332',
        lng: '120.980754',
      },
      loading: true,
      isRouterAlive: true,
      innerVisible1: false,
      showout: true,
      isshowimg: false,
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      ts: this.newStore(),
      showcl2: false,
      showSuper: false,
      id: '',
      writetime: '',
      remark: '',
      bigimg: '',
      queryparam: '',
      alldata: [],
      tableData: [],
      tableData1: [],
      tableData2: [],
      oldFileName: [],
      newFileUrl: [],
      fileList: [],
      keyword: '',
      qtbm: '',
      zrdw: '',
      status: '',
      tf: '',
      qtbmdata: '',
      zrdwdata: '',
      statusdata: [{
        value: '0',
        label: '未更新',
      }, {
        value: '1',
        label: '已更新',
      }, {
        value: '2',
        label: '要求重填',
      }],
      tfdata: [{
        value: '0',
        label: '否',
      }, {
        value: '1',
        label: '是',
      }],
      showS: false,
      showcl: false,
      xmData: {},
    };
  },
  components: {
    qqmap,
  },
  created() {
    if (this.$route.query.istf) {
      this.tf = this.$route.query.istf;
    }
    if (this.$route.query.isstatus) {
      this.status = this.$route.query.isstatus;
    }
    this.getprojectList();
    this.getSelect();
  },
  methods: {
    isshowMap() {
      this.reload();
      this.innerVisible1 = !this.innerVisible1;
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    showimg(url) {
      this.isshowimg = true;
      this.bigimg = url;
    },
    doexportExcel() {
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(document.getElementById('tableexcel'));
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx');
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout); }
      return wbout;
    },
    exportExcel() {
      this.getalldata();
    },
    handleCurrentChange() {
      this.getprojectList();
    },
    dowrite() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680A44B926655063AD8D760B72E2D1B9492',
            id: this.id,
            writetime: this.writetime,
            remark: this.remark,
            oldFileName: this.oldFileName,
            newFileUrl: this.newFileUrl,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.showcl2 = false;
              this.checkXM();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    showwrite(item) {
      this.showcl2 = true;
      this.id = item.hash.id;
    },
    checkXM(item) {
      this.showS = true;
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680B80A9177C0749743021A445010569AEF',
        id: item.hash.id,
      };
      const req1 = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525AF42869BB2FF1015BBFF0B9210751F692',
        pid: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xmData = ts.d.data.operation1[0].hash;
        console.log(this.xmData);
        this.chooseLocal.lat = this.xmData.lat;
        this.chooseLocal.lng = this.xmData.lon;
        console.log(this.chooseLocal);

        // this.getSX2(this.xmData.propertyid);
        // this.getSX3(this.xmData.nid);
        this.xmData.xmStatus = item.hash.statusname;
        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.tableData1 = ts.d.data.operation1;
        console.log(this.tableData1);
      });
    },
    getalldata() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680DB96A5059201EB7027BC1BEBBD158160C2857FDC279194E8',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.alldata = ts.d.data.operation1;
        // this.showout = true;

        // this.showout = false;
        setTimeout(() => {
          this.doexportExcel();
        }, 200);
      });
    },
    viewcl(item) {
      this.showcl = true;

      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525A5E85279393623265BFF0B9210751F692',
        id: item.hash.id,
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.tableData2 = ts.d.data.operation2;
      });
    },
    getSelect() {
      const req4 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '1',
      };
      const req5 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '2',
      };

      this.spost(this.ts, '/mainservlet', req4).then((ts) => {
        this.qtbmdata = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        this.zrdwdata = ts.d.data.operation1;
      });
    },
    getprojectList() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680DB96A5059201EB7027BC1BEBBD158160BFF0B9210751F692',
        assessunit: this.qtbm,
        orgid: this.zrdw,
        queryparam: this.queryparam,
        isouter: this.tf,
        pg_status: this.status,
        start: (this.currentPage3 - 1) * this.pagesize,
        limit: this.pagesize,
      };


      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.tableData = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
        this.loading = false;
      });
    },
    changefileList(file) {
      const flieData = {};
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        flieData.name = file.name;
        flieData.data = sendData;
        this.fileList.push(flieData);
        this.upload3();
      };
    },
    upload3() {
      for (let i = 0; i < this.fileList.length; i += 1) {
        const req = {};
        req.oriFileName = this.fileList[i].name;
        req.value = this.fileList[i].data;
        this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
          this.oldFileName.push(ts.d.oldFileName);
          this.newFileUrl.push(ts.d.newFileUrl);
        });
      }
    },
    removeImg3(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },
  },
};
</script>

<style lang="stylus" scoped>
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
  margin-right: 4px
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.el-form-item
  width 50%
  float left
.el-select
  width 10%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
